<script type="text/javascript" src="JO_JS/vadilation.js"></script>

		
<?php 
	
	$path="C:/xampp/htdocs/00_JO/JOi/";
 	include ($path.'controller/SO_recommendation_Controller.php');
	if(isset($_GET['SO_chude'])){
	$recommendation=$_GET['SO_chude'];
	
	}
	if(isset($_GET['SO_loai']))
	{
	if($_GET['SO_loai']!=" ")
	$result_type=JO_012_gettype($_GET['SO_loai']);
	if($result_type!=NULL)
	if($result_type->num_rows)
	$loai=$result_type->fetch_array();
	$loai=$loai['subject'];
	}
	else
	
	$loai='artist';	
	
	
	?>
<script>
 var musics=new Array();
 var n=0;

function FcheckFormTD(f){
//alert(document.getElementById('SO_amount').value);
//if(!FcheckFilled('type ',f.type.value)){ f.type.focus();return false; }
if(!FcheckFilled('subject ',document.getElementById('SO_subject').value)){ document.getElementById('SO_subject').focus();return false; }
if(!FcheckFilled('description ',f.SO_description.value)){ f.SO_description.focus();return false; }
if(!FcheckFilled('amount ',document.getElementById('SO_amount').value)){ document.getElementById('SO_amount').focus();return false; }
if(!FcheckNumber('amount',document.getElementById('SO_amount').value)){ document.getElementById('SO_amount').focus();return false; }
if(!FcheckFilled('start ',document.getElementById('SO_start').value)){document.getElementById('SO_start').focus();return false; }
if(!FcheckFilled('expired ',document.getElementById('SO_expired').value)){ document.getElementById('SO_expired').focus();return false; }
if(!FcheckFilled('note ',document.getElementById('SO_note').value)){ document.getElementById('SO_note').focus();return false; }

//if(!FcheckBoxes('Lĩnh vực',f.lbxlinhvuc,1,0)){f.lbxlinhvuc[0].focus();return false;}
//if(!FcheckFilled('Địa điểm làm việc',f.txtdiadiemlamviec.value)){ f.txtdiadiemlamviec.focus();return false; }
//if(!FcheckFilled('Mô tả sơ lược',f.txtmota.value)){ f.txtmota.focus();return false; }
//if(!FcheckFilled('kỹ năng công việc',f.txtkynang.value)){ f.txtkynang.focus();return false; }
//if(!FcheckFilled('mức lương',f.txtmucluong.value)){ f.txtmucluong.focus();return false; }
//if(!FcheckFilled('chế độ',f.txtchedo.value)){ f.txtchedo.focus();return false; }
//if(!FcheckFilled('yêu cầu hồ sơ',f.txthoso.value)){ f.txthoso.focus();return false; }
//if(!FcheckFilled('hạn nộp hồ sơ',f.txthannop.value)){ f.txthannop.focus();return false; }
//stemt.submit();
//stetc.submit();
return true;
}

	
	


function addtop(id){
        
        var contenttop="<span id='trtop_"+id+"'>";
        contenttop+="<table  class='JO_tablei_input' style='margin-left:8px;width:684px'>";
        contenttop+="<tr >";
		contenttop+="<input type='hidden' value='"+id+"' name='key[]'>"
		contenttop+="<td style='width: 28px' id='tdtopid_"+id+"'>"+id+"</td>";
        contenttop+="<td id='tdtop_"+id+"'width='612px' >"+document.getElementById("td_"+id).innerHTML+"</td>";
		contenttop+="<td style='width: 12px'><a href='#i' onclick='topup("+id+");'><img src='JO_images/JO_26_icon_top_on.png' class='JO_icon' alt='Up' title='Up'/></a></td>";
        contenttop+="<td style='width: 12px'><a href='#i' onclick='topdown("+id+");'><img src='JO_images/JO_28_icon_down_on.png' class='JO_icon' alt='Down' title='Down'/></a></td>";
        contenttop+="<td style='width: 12px'><a href='#i' onclick='removetop("+id+");'><img src='JO_images/JO_23_icon_delete_on.png' class='JO_icon' alt='Remove' title='Remove'/></a></td>";
        contenttop+="</tr>";
        contenttop+="</table>";
        contenttop+="</span>";
        document.getElementById("tb_top_music").innerHTML+=contenttop;

        //alert(document.getElementById("tb_top_music").innerHTML);
        var del = document.getElementById("tr_"+id);
        del.parentNode.removeChild(del);
        musics[n]=id;
        n++;
        //document.getElementById("kqkq").innerHTML=musics;
        create_top();
    }
    function removetop(id){
        
        var contentmusic="<span id='tr_"+id+"'>";
        contentmusic+="<table class='JO_tablei_input' style='margin-left:8px;width:684px' >";
        contentmusic+="<tr ><td id='td_"+id+"'>"+document.getElementById("tdtop_"+id).innerHTML+"</td>";
        contentmusic+="<td style='width:12px'><a href='#i' onclick='addtop("+id+");'><img src='JO_images/add_top.png' class='butt_image' alt='Add To Top Music' title='Add To Top Music'width='12px'/></a></td>";
        contentmusic+="</tr>";
        contentmusic+="</table>";
        contentmusic+="</span>";
        document.getElementById("tb_music").innerHTML+=contentmusic;
        var del=document.getElementById("trtop_"+id);
        del.parentNode.removeChild(del);
        for(var i=0;i<musics.length;i++){
            if(musics[i]==id){
                musics[i]=undefined;
                create_top();
                break;
            }
        }
        
    }
	    function topup(id){
			
        //alert(document.getElementById("trtop_"+id).id+":id");
        for(var i=0;i<musics.length;i++){
			
            if(musics[i]==id && i>0){
                var j=1;
                while(musics[i-j]==undefined && i-j>=0){
                    j++;
                }

                var contenttmp=document.getElementById("trtop_"+musics[i]).innerHTML;
				//  var contenttmp2=document.getElementById("trtop_"+musics[i-j]);
//                var pct=contenttmp.parentNode;
//                pct.replaceChild(contenttmp,contenttmp2);
//                pct.replaceChild(contenttmp2,contenttmp);
                document.getElementById("trtop_"+musics[i]).innerHTML=document.getElementById("trtop_"+musics[i-j]).innerHTML;;
                document.getElementById("trtop_"+musics[i-j]).innerHTML=contenttmp;

                var idtmptr=document.getElementById("trtop_"+musics[i]).id;
                var idtmptr2=document.getElementById("trtop_"+musics[i-j]).id;
                document.getElementById("trtop_"+musics[i]).id=document.getElementById("trtop_"+musics[i]).id+"abc123";
                document.getElementById("trtop_"+musics[i-j]).id=idtmptr;
                document.getElementById("trtop_"+musics[i]+"abc123").id=idtmptr2

                //hoan vi 2 element
                var tmp=musics[i];
                musics[i]=musics[i-j];
                musics[i-j]=tmp;

                //document.getElementById("kqkq").innerHTML=musics;
                create_top();
                //alert(musics);
                break;
            }
        }
        
    }
    function topdown(id){
	
        //alert(document.getElementById("trtop_"+id).id+":id");
        for(var i=0;i<musics.length;i++){
            if(musics[i]==id){
                var j=1;
                while(musics[i+j]==undefined && i+j<musics.length){

                    j++;
                }
                if(musics[i+j]==undefined){ return;}
                //alert(musics[i]+":"+musics[i+j]);
               
 

                var contenttmpdown=document.getElementById("trtop_"+musics[i]).innerHTML;
                document.getElementById("trtop_"+musics[i]).innerHTML=document.getElementById("trtop_"+musics[i+j]).innerHTML;
                document.getElementById("trtop_"+musics[i+j]).innerHTML=contenttmpdown;
                //alert(document.getElementById("trtop_"+musics[i+j]).id);

                var idtmptr=document.getElementById("trtop_"+musics[i]).id;
                var idtmptr2=document.getElementById("trtop_"+musics[i+j]).id;
                document.getElementById("trtop_"+musics[i]).id=document.getElementById("trtop_"+musics[i]).id+"abc123";
                document.getElementById("trtop_"+musics[i+j]).id=idtmptr;
                document.getElementById("trtop_"+musics[i]+"abc123").id=idtmptr2;
                
                //hoan vi 2 element
                var tmp=musics[i];
                musics[i]=musics[i+j];
                musics[i+j]=tmp;

                //document.getElementById("kqkq").innerHTML=musics;
                create_top();
                //alert(musics);
                break;
            }
        }

    }
	function create_top()
    {
        var ntop=1;
        for(var i=0;i<musics.length;i++){
            if(musics[i]!=undefined){
                document.getElementById("tdtopid_"+musics[i]).innerHTML=ntop;
                ntop++;
            }
        }
    }
	function sendurl(p){
            <?
            if($searchkeyartist==$JO["JO_searchid"]){
              ?>
                location=("../JOi/index.php?JO_unit=012_recommendation&Page="+p+"&SO_chude=<?=$_GET['SO_chude']?>&SO_loai=<?=$_GET['SO_loai']?>");
				
				
                <?
				
            }else{
                ?>
                location=("../JOi/index.php?JO_unit=012_recommendation&Page="+p+"&SO_chude=<?=$_GET['SO_chude']?>&SO_loai=<?=$_GET['SO_loai']?>"+"&searchkey=<?=urlencode($searchkeyartist)?>");
                <?
            }
            ?>
            
    }
	   function searchKeyPress(e,str)
    {
	
	
        // look for window.event in case event isn't passed in
        if (window.event) { e = window.event; }
        if (e.keyCode == 13)
        {
            

                location=("../JOi/index.php?JO_unit=012_recommendation&SO_chude=<?=$_GET['SO_chude']?>&SO_loai=<?=$_GET['SO_loai']?>&sea="+str);
            

        }
    }
</script>


<div style="width: 960px;background: url(JO_images/hr.gif1) repeat-x top left #222;position: relative;float:left;">
  <? include 'JO_012_nav.php';?>
  <div class="mar8i"></div>
  <div style="margin-left: 0px;" class="bar_720i" >
    <div id="popup_name2" class="popup_block">
      <iframe
			id		= 'JO_iframe1'
			name	= 'JO_iframe1'
			src=""
            class="popup"
            style="width:478px;height:240px"
		></iframe>
    </div>
    <div style="" class="JO_h1i">
      K-PopZone
    </div>
    <div class="content720i">
      <div class="mar8i"></div>
      <div style="width: 704px;float: left;margin-bottom: 8px;">
        <div class="JO_Kpop_itemi JO_no_background">
          <div class="JO_kpop_item_titlei"> List Recommended </div>
          <div class="mar8i"></div>
          
          <form method="post" action="controller/JO_navigation.php">
            <span id="tb_top_music">
            <table class="tbi" style="width:688px;">
              <tr>
                <th width="28px" >No.</th>
                <th width="612px">Top Artist</th>
                <th> <img alt="Edit" src="JO_images/JO_26_icon_top_on.png" class="butt_image"/> </th>
                <th> <img alt="Edit" src="JO_images/JO_28_icon_down_on.png" class="butt_image"/> </th>
                <th> <img alt="Edit" src="JO_images/JO_23_icon_delete_on.png" class="butt_image"/> </th>
              </tr>
              </table>
              <?php
					if(isset($_GET['SO_chude']))
					if(isset($_GET['SO_loai']))
					$result_recommeded_list=SO_12_recommended_list_getlist($_GET['SO_chude'],$loai);
					$ntop=1;
					//if($result_recommeded_list!=NULL)
					if(isset($result_recommeded_list) && $result_recommeded_list->num_rows)
					while($row_recommeded_list=$result_recommeded_list->fetch_array())
					{
										
					?>
              <span id='trtop_<?=$row_recommeded_list["key_item"]?>'>
              <input type="hidden" name="key[]" value="<?= $row_recommeded_list["key_item"]?>"/>
              <table  class="tbi" style="width:688px;">
              <tr>
                <td width="28px" id='tdtopid_<?=$row_recommeded_list["key_item"]?>'><?=$ntop?></td>
                <td width="612px" id='tdtop_<?=$row_recommeded_list["key_item"]?>'><?=(isset($loai)?($loai=="artist")?$row_recommeded_list['name']:$row_recommeded_list['subject']:"")?></td>
                <td><a href="#i"  onclick='topup("<?=$row_recommeded_list["key_item"]?>");'> <img 
									alt		= "Edit"
									src		= "JO_images/JO_26_icon_top_on.png"
									class	= "butt_image"
								/> </a></td>
                <td><a href="#i"  onclick='topdown("<?=$row_recommeded_list["key_item"]?>");'> <img 
									alt		= "Edit"
									src		= "JO_images/JO_28_icon_down_on.png"
									class	= "butt_image"
								/> </a></td>
                <td><a href="#i" onclick='removetop("<?=$row_recommeded_list["key_item"]?>");'> <img 
									alt		= "delete"
									src		= "JO_images/JO_23_icon_delete_on.png"
									class	= "butt_image"
								/> </a></td>
              </tr>
              </table>
              </span>
              <script type="text/javascript">
                            musics[n]=<?=$row_recommeded_list['key_item']?>;
                            n++;
							
                        </script>
              <?
					 $ntop++;
                 }
            
                ?>
              </span>
              <tr class= "last_row">
                <td colspan="6" class="paging_row"></td>
              </tr>
            </table>
            <?php 
			if(isset($_GET['SO_chude']) && $_GET['SO_chude']!='')
			{
				$result_get=SO_12_get_date($_GET['SO_chude'])	;
				if($result_get!=NULL)
				$result_get=$result_get->fetch_array();
			}
			
	
			?>
            <input type="hidden" name="SO_controller" value="SO_recommendation_Controller" />
           	<input type="hidden" name="recommendation" value="<?=$recommendation?>" />
            <input type="hidden" name="start" value="<?=$result_get['start_date']?>" />
            <input type="hidden" name="exp" value="<?=$result_get['expired_date']?>" />
            <input type="hidden" value="SaveTop" name="SO_query" />
            <input type="hidden" value="<?=$row_recommeded_list['recommendation']?>" />
           
             	<table  class="tbi" style="width:688px; margin-left:8px">
                <tr>
                <td>
            	<input type="submit" class="JO_buttonii" style="background:#333;border:none;width:100%;height:24px;margin:0 4px 0px 0;"/>
              	</td>
                </tr>
                </table>
          </form>
          
          <div style="margin-left:8px;width:688px;">
      <span id="tb_music" >
      <table  class="tbi" style="width:688px;">
        <tr>
          <th>Subject</th>

          <th style="width:100px">Tìm Kiếm:</th>
          <th style="width:100px">
            <input type="text" value="<?=isset($_REQUEST['sea'])?$_REQUEST['sea']:""?>" style="height:20px !important;background:#333;border:none
            " onkeypress="searchKeyPress(event,this.value)"/></th>
        </tr>
      </table>
     <?php
	 //if(isset($_GET['SO_loai']))
		$sea=isset($_REQUEST['sea'])?$_REQUEST['sea']:"";
	 $result_count=JO_12_getlist_subject($loai,$sea);
	 
	 $total=$result_count->num_rows;
	 $page=1;
	 $limit=10;
	 $i=1;
	 if(($total%$limit)!=0) {$numpages=(int)($total/$limit)+1;}
	 else                {$numpages=$total/$limit;}
	 if(isset ($_REQUEST["Page"])){$page=$_REQUEST["Page"];}
	 $vt=(($page-1)*$limit)+1;
	 //if(isset($_GET['SO_loai']))
	
	 $result_subject=JO_12_get_pagelist_subject($loai,$vt,$limit,$sea);
	 if($result_subject->num_rows)
	
	 while($result_subjects=$result_subject->fetch_array())
	 {
		  
	 ?>
      <span id="tr_<?=$result_subjects["key"]?>">
      <table  class="tbi" style="width:688px;">
        <tr >
          <td id="td_<?=$result_subjects["key"]?>"><?=isset($_GET['SO_loai'])?($_GET['SO_loai']==1)?$result_subjects['name']:$result_subjects['subject']:$result_subjects['name']?></td>
          <td style="width: 12px"><a href="#i" onclick='addtop("<?=$result_subjects["key"]?>");'><img src="JO_images/add_top.png" class	= "butt_image" alt="Add To Top Music" title="Add To Top Music" width="12px"/></a></td>
        </tr>
      </table>
      </span>
      <?php  }?>
    
      </span>
              <table  class="tbi" style="width:688px;">
                <tr >
                  <td style="text-align: center;border-bottom: 0px"><?
        
                        if($numpages>1){
                            if($page>2){
                            ?>
                    <a href="#" onclick="sendurl('1');">◀</a>
                    <?
                            }
                            if($page>1){
                            ?>
                    <a href="#" onclick="sendurl('<?=($page-1)?>');">◁</a>
                    <?
                            }
                            if($page-4>1) echo "...";
                            for($i=$page-4;$i<=($page-1);$i++){
                                if($i>0){
                                ?>
                    <a href="#" onclick="sendurl('<?=$i?>');">
                    <?=$i?>
                    </a>
                    <?
                                }
                            }
                            echo  "<b style='color=#ffffff;'><u>".$page."</u></b>";
                            for($i=$page+1;$i<=($page+4);$i++){
                                if($i<=$numpages){
                                ?>
                    <a href="#" onclick="sendurl('<?=$i?>');">
                    <?=$i?>
                    </a>
                    <?
                                }
                            }
                            if($page+4<$numpages) echo "...";
                            if($page<$numpages){
                            ?>
                    <a href="#" onclick="sendurl('<?=($page+1) ?>');">▷</a>
                    <?
                            }
                            if($page<($numpages-1)){
                            ?>
                    <a href="#" onclick="sendurl('<?=$numpages ?>');">▶</a>
                    <?
                            }
        
                        }
                         ?></td>
                </tr>
              </table>
      <div id ="kqkq"></div>
      </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="JO_popup" style="position:fixed;top:0px;left:0px;;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:998;display:none" onclick="JO_display2('JO_popup');JO_display2('JO_popupsub');"> </div>
<div id="JO_popupsub" style="position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-200px;width:480px;height:280px;background:#333;z-index:999; -moz-border-radius: 10px;
-webkit-border-radius: 10px;display:none"onclick="return;"> </div>
